<template>
  <div class="dashboard-container">
    <!-- 数据概览卡片 -->
    <div class="data-overview">
      <el-row :gutter="20">
        <el-col :span="6">
          <el-card shadow="hover" class="data-card">
            <template #header>
              <div class="card-header">
                <span>图书总数</span>
                <el-icon class="icon"><Collection /></el-icon>
              </div>
            </template>
            <div class="card-body">
              <div class="number">{{ statistics.totalBooks }}</div>
              <div class="compare">
                <span>较上月</span>
                <span
                  :class="{
                    up: statistics.bookIncrease > 0,
                    down: statistics.bookIncrease < 0,
                  }"
                >
                  {{ statistics.bookIncrease > 0 ? "+" : ""
                  }}{{ statistics.bookIncrease }}%
                </span>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card shadow="hover" class="data-card">
            <template #header>
              <div class="card-header">
                <span>读者人数</span>
                <el-icon class="icon"><User /></el-icon>
              </div>
            </template>
            <div class="card-body">
              <div class="number">{{ statistics.totalReaders }}</div>
              <div class="compare">
                <span>较上月</span>
                <span
                  :class="{
                    up: statistics.readerIncrease > 0,
                    down: statistics.readerIncrease < 0,
                  }"
                >
                  {{ statistics.readerIncrease > 0 ? "+" : ""
                  }}{{ statistics.readerIncrease }}%
                </span>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card shadow="hover" class="data-card">
            <template #header>
              <div class="card-header">
                <span>借阅总数</span>
                <el-icon class="icon"><Reading /></el-icon>
              </div>
            </template>
            <div class="card-body">
              <div class="number">{{ statistics.totalBorrows }}</div>
              <div class="compare">
                <span>较上月</span>
                <span
                  :class="{
                    up: statistics.borrowIncrease > 0,
                    down: statistics.borrowIncrease < 0,
                  }"
                >
                  {{ statistics.borrowIncrease > 0 ? "+" : ""
                  }}{{ statistics.borrowIncrease }}%
                </span>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card shadow="hover" class="data-card">
            <template #header>
              <div class="card-header">
                <span>逾期数</span>
                <el-icon class="icon"><Warning /></el-icon>
              </div>
            </template>
            <div class="card-body">
              <div class="number">{{ statistics.overdueCount }}</div>
              <div class="compare">
                <span>较上月</span>
                <span
                  :class="{
                    up: statistics.overdueIncrease > 0,
                    down: statistics.overdueIncrease < 0,
                  }"
                >
                  {{ statistics.overdueIncrease > 0 ? "+" : ""
                  }}{{ statistics.overdueIncrease }}%
                </span>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <!-- 图表区域 -->
    <div class="charts-container">
      <el-row :gutter="20">
        <el-col :span="12">
          <el-card shadow="hover" class="chart-card">
            <template #header>
              <div class="card-header">
                <span>近7天借阅趋势</span>
              </div>
            </template>
            <div class="chart" ref="borrowTrendChart"></div>
          </el-card>
        </el-col>
        <el-col :span="12">
          <el-card shadow="hover" class="chart-card">
            <template #header>
              <div class="card-header">
                <span>图书分类统计</span>
              </div>
            </template>
            <div class="chart" ref="categoryChart"></div>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { Collection, User, Reading, Warning } from "@element-plus/icons-vue";
import * as echarts from "echarts";

// 模拟统计数据
const statistics = ref({
  totalBooks: 2580,
  totalReaders: 1200,
  totalBorrows: 3650,
  overdueCount: 25,
  bookIncrease: 12,
  readerIncrease: 8,
  borrowIncrease: 15,
  overdueIncrease: -5,
});

// 图表引用
const borrowTrendChart = ref(null);
const categoryChart = ref(null);

// 模拟借阅趋势数据
const mockBorrowTrend = {
  dates: ["3-01", "3-02", "3-03", "3-04", "3-05", "3-06", "3-07"],
  counts: [30, 42, 35, 48, 38, 50, 45],
};

// 模拟分类统计数据
const mockCategoryStats = [
  { value: 320, name: "文学艺术" },
  { value: 240, name: "科技计算机" },
  { value: 180, name: "历史地理" },
  { value: 150, name: "社会科学" },
  { value: 120, name: "自然科学" },
];

// 初始化借阅趋势图表
const initBorrowTrendChart = () => {
  const chart = echarts.init(borrowTrendChart.value);
  chart.setOption({
    tooltip: {
      trigger: "axis",
    },
    grid: {
      left: "3%",
      right: "4%",
      bottom: "3%",
      containLabel: true,
    },
    xAxis: {
      type: "category",
      boundaryGap: false,
      data: mockBorrowTrend.dates,
    },
    yAxis: {
      type: "value",
    },
    series: [
      {
        name: "借阅数量",
        data: mockBorrowTrend.counts,
        type: "line",
        smooth: true,
        areaStyle: {
          opacity: 0.3,
        },
        itemStyle: {
          color: "#409EFF",
        },
        lineStyle: {
          width: 2,
        },
      },
    ],
  });
};

// 初始化分类统计图表
const initCategoryChart = () => {
  const chart = echarts.init(categoryChart.value);
  chart.setOption({
    tooltip: {
      trigger: "item",
      formatter: "{b}: {c} ({d}%)",
    },
    legend: {
      orient: "vertical",
      left: "left",
    },
    series: [
      {
        type: "pie",
        radius: ["40%", "70%"],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 10,
          borderColor: "#fff",
          borderWidth: 2,
        },
        label: {
          show: true,
          formatter: "{b}: {c}册",
        },
        emphasis: {
          label: {
            show: true,
            fontSize: "14",
            fontWeight: "bold",
          },
        },
        labelLine: {
          show: true,
        },
        data: mockCategoryStats,
      },
    ],
  });
};

onMounted(() => {
  // 初始化图表
  initBorrowTrendChart();
  initCategoryChart();

  // 监听窗口大小变化，重绘图表
  window.addEventListener("resize", () => {
    const borrowChart = echarts.getInstanceByDom(borrowTrendChart.value);
    const cateChart = echarts.getInstanceByDom(categoryChart.value);
    borrowChart?.resize();
    cateChart?.resize();
  });
});
</script>

<style scoped>
.dashboard-container {
  padding: 20px;
  background-color: #f0f2f5;
}

.data-overview {
  margin-bottom: 20px;
}

.data-card :deep(.el-card__header) {
  border-bottom: none;
  padding: 15px 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 16px;
  color: #606266;
}

.icon {
  font-size: 20px;
  color: #409eff;
}

.card-body {
  text-align: center;
  padding: 10px 0;
}

.number {
  font-size: 24px;
  font-weight: bold;
  color: #303133;
  margin-bottom: 8px;
}

.compare {
  font-size: 12px;
  color: #909399;
}

.compare .up {
  color: #67c23a;
}

.compare .down {
  color: #f56c6c;
}

.charts-container {
  margin-top: 20px;
}

.chart-card {
  margin-bottom: 20px;
}

.chart {
  height: 300px;
  padding: 10px;
}
</style>
